<template>
  <div class="textbox" :class="color">
    <span>{{ myCount }}</span>
    <div v-if="color === 'important'">重点企业</div>
    <!-- <div v-else-if="color === 'typical'">天津市典型行业</div> -->
    <div v-if="color === 'major'">用车大户</div>
    <div v-else-if="color === 'other'">其他</div>
  </div>
</template>

<script>
export default {
  name: "oilbox",
  props: {
    color: {
      type: String,
      default: "",
    },
    sum: {
      default:0,
      type: String | Number
    },
  },
  mounted() { },
  computed: {
    myCount: function () {
      return this.myfun.myformat(this.sum);
    },
  },
};
</script>

<style scoped lang="scss">
.textbox {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0px 5px;
  color: #f0f6fb;

  span {
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 22px;
    margin-bottom: 18px;
  }

  div {
    margin-bottom: 7px;
    width: 87px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 13px;
  }
}

.important {
  background: url("../../assets/images/oil.png") no-repeat center;
  background-size: contain;

  div {
    width: 100%;
    background-image: linear-gradient(115deg, #11a2f3b3 0%, #07e7f3b3 100%);
  }
}

.typical {
  background: url("../../assets/images/steam.png") no-repeat center;
  background-size: contain;

  div {
    width: 100%;

    background-image: linear-gradient(115deg, #4b41f4b3 0%, #0fa1f5b3 100%);
  }
}

.major {
  background: url("../../assets/images/pm.png") no-repeat center;
  background-size: contain;

  div {
    width: 100%;

    background-image: linear-gradient(115deg, #ff9102b3 0%, #ffa701b3 50%, #ffba00b3 100%);
  }
}


.other {

  background: url("../../assets/images/so2.png") no-repeat center;
  background-size: contain;

  div {
    width: 100%;

    background-image: linear-gradient(115deg,
        #6018d7b3 0%,
        #9d1fdfb3 100%);
  }
}
</style>
